import React, { Component } from 'react'
import { Card, Icon, List, } from "antd";

import LinkButton from "../../components/link-button";
import { BASE_IMG_URL } from "../../utils/constants";
import { reqCategory } from "../../api";

const Item = List.Item;

export default class ProductDetail extends Component {

    state = {
        cName1: '', // 一级分类名称
        cName2: '', // 二级分类名称
    }
    /*
    异步获取当前产品对应的分类名称
    */
    getCategoryName = async () => {
        const {categoryId, pCategoryId} = this.props.location.state.product;
        // console.log(categoryId, pCategoryId);
        if (pCategoryId === '0') {
            // 获取一级分类名称
            const result = await reqCategory(categoryId);
            const cName1 = result.data.name;
            this.setState({cName1});
        } else {
            // 获取一级分类名称
            /*const result1 = await reqCategory(pCategoryId)
            const cName1 = result1.data.name
            // 获取二级分类名称
            const result2 = await reqCategory(categoryId)
            const cName2 = result2.data.name
            this.setState({cName1, cName2})*/
            /*
            一次发多个请求 , 等所有请求都返回后一起处理 , 如果有一个请求出错了 , 整个都会失败
            Promise.all([promise1, promise2]) 返回值一个 promise 对象 , 异步成功返回的是
            [result1, result2]
            */
            const results = await Promise.all([reqCategory(pCategoryId), reqCategory(categoryId)]);
            // console.log('results = ' + JSON.stringify(results));
            const result1 = results[0]
            const result2 = results[1]
            const cName1 = result1.data.name
            const cName2 = result2.data.name
            this.setState({cName1, cName2})
        }
    }

    async componentDidMount() {
        this.getCategoryName()
        // // 得到当前商品的父类 ID 
        // const {pCategoryId, categoryId} = this.props.location.state.product;
        // if(pCategoryId === 0) { // 一级分类下的商品
        //     const result = await reqCategory(categoryId);
        //     const cName1 = result.data.name;
        //     this.setState({cName1})
        // }else { // 二级分类下的商品
        //     // 方法一：通过多个 await 方式发多个请求：后面一个请求在前一个请求成功返回之后才送
        //     const result1 = await reqCategory(categoryId); // 获取一级分类列表
        //     const result2 = await reqCategory(categoryId); // 获取二级分类列表
        //     const cName1 = result1.data.name;
        //     const cName2 = result2.data.name;

        //     // // 方法二： 一次性发送多个请求， 只有都成功了， 才正常处理
        //     // const results = await Promise.all([reqCategory(pCategoryId), reqCategory(categoryId)]);
        //     // const cName1 = results[0].data.name;
        //     // const cName2 = results[1].data.name;

        //     this.setState({cName1, cName2});
        // }
    }

    render() {

        // 读取携带过来的 state 数据
        const {name, desc, price, detail, imgs}  = this.props.location.state.product;
        // 
        const {cName1, cName2} = this.state;

        const  title = (
            <span>
                <LinkButton>
                    <Icon type='arrow-left' 
                    style={{color: 'green', marginRight: 15, fontSize: 20}}
                    onClick={() => this.props.history.goBack()}
                    />
                </LinkButton>
                <span>商品详情</span>
            </span>
        );
        return (
            <Card title={title} className='product-detail'>
                <List>
                    <Item>
                        <span className='left'>商品管理：</span>
                        <span>{name}</span>
                    </Item>
                    <Item>
                        <span className='left'>商品描述：</span>
                        <span>{desc}</span>
                    </Item>
                    <Item>
                        <span className='left'>商品价格：</span>
                        <span>{price}</span>
                    </Item>
                    <Item>
                        <span className='left'>所属分类：</span>
                        <span>{cName1} {cName2 ? '-->' + cName2: ''}</span>
                    </Item>
                    <Item>
                        <span className='left'>商品照片：</span>
                        <span>
                            {
                                imgs.map(img => (
                                    <img 
                                    key={img}
                                    src={BASE_IMG_URL + img}
                                    className="product-img" 
                                    alt="img" />
                                ))
                            }
                        </span>
                    </Item>
                    <Item>
                        <span className='left'>商品详情：</span>
                        <span dangerouslySetInnerHTML={{__html: detail}}></span>
                    </Item>
                </List>
            </Card>
        )
    }
}